<template>
  <div class="app-wrapper">
    <div class="nav-ulick">
      <ul>
        <li :key="index" v-for="(item,index) in ulikeList "><span>{{item.name}}</span></li>
      </ul>
    </div>
    <section class="SwitchTab-wrapper">
      <div class="SwitchTab-transition">
        <section class="tab-list-item":key="index" v-for="(item,index) in ulikeViewArr ">
          <header>
            <div class="HotFoodShop">
              <img :src="item.image_path?'https://fuss10.elemecdn.com/'+item.image_path.substr(0,1)+'/'+item.image_path.substr(1,2)+'/'+item.image_path.substr(3)+(item.image_path.slice(-3)=='peg'?'.jpeg':'.png')+'?imageMogr/format/webp/thumbnail/!42x42r/gravity/Center/crop/42x42/':''" alt="">
              <h3>{{item.restaurant.name}}</h3>
            </div>
            <span>¥20起送 / {{item.restaurant.piecewise_agent_fee.description}}</span>
          </header>
          <ul class="HotFoodShop-3fhg6">
            <li :key="index2" v-for="(item2,index2) in item.foods">
                <img :src="item2.image_hash?'https://fuss10.elemecdn.com/'+item2.image_hash+(item2.image_hash.slice(-3)=='peg'?'.jpeg':'.png')+'?imageMogr/format/webp/thumbnail/!220x220r/gravity/Center/crop/220x220/':''" alt="">
                <div class="HotFoodShop-btm">
                  <h4>{{item2.name}}</h4>
                  <p><i>￥</i>{{item2.price}}</p>
                  <div class="seeyou">去看看</div>
                </div>
            </li>
          </ul>
        </section>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'ulike',
  methods: {
    hideTab: function () {
      this.$store.commit('HIDETAB')
    },
    getUlikeTop: function () {
      this.$store.commit('ULIKELIST')
    },
    getUlikeView: function () {
      this.$store.commit('ULIKEVIEWARR')
    }
  },
  mounted: function () {
    this.hideTab()
    this.getUlikeTop()
    this.getUlikeView()
  },
  computed: {
    ulikeList: function () {
      return this.$store.state.ulikeList
    },
    ulikeViewArr: function () {
      return this.$store.state.ulikeViewArr
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '../../static/hotcss/px2rem.scss';
  .app-wrapper{
    padding-top:  px2rem(113);
    height: 100%;
    .nav-ulick{
      width: 100%;
      height: px2rem(98);
      background: hsla(0,0%,100%,.9);
      box-shadow: 0 px2rem(2) px2rem(4) 0 rgba(0,0,0,.05);
      text-align: center;
      position: fixed;
      left: 0;
      top: 0;
      ul{
        display: flex;
        overflow: auto;
        white-space: nowrap;
        padding: 0 px2rem(10);
        li:nth-child(1) span{
          border-color: #ff5339;
          color: #ff5339;
          font-weight: 700;
        }
        li{
          flex-shrink: 0;
          padding: px2rem(25) px2rem(10);
          width: px2rem(176);
          color: #333;
          font-size: px2rem(26);
          height: px2rem(98);
          span{
            display: block;
            overflow: hidden;
            border: 1px solid #ddd;
            border-radius: px2rem(100);
            text-align: center;
            line-height: px2rem(48);
          }
        }
      }
    }
    .SwitchTab-wrapper{
      width: 100%;
      .SwitchTab-transition{
        .tab-list-item{
          margin: 0 auto;
          padding: 0 px2rem(18) px2rem(25);
          width: px2rem(730);
          border-radius: px2rem(12);
          background: #fff;
          box-shadow: 0 px2rem(2) px2rem(4) 0 rgba(0,0,0,.1);
          box-sizing: border-box;
          margin-bottom: px2rem(15);
          header{
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: px2rem(86);
            .HotFoodShop{
              display: flex;
              align-items: center;
              flex:1;
              overflow: hidden;
              img{
                  display: block;
                  flex-shrink: 0;
                  overflow: hidden;
                  width:  px2rem(42);
                  height:  px2rem(42);
                  border-radius: 50%;
              }
              h3{
                overflow: hidden;
                margin-left: px2rem(18);
                color: #333;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-weight: 700;
                font-size:  px2rem(28);
              }
            }
            span{
                color: #999;
                font-size:px2rem(22);
            }
          }
          .HotFoodShop-3fhg6{
            display: flex;
            justify-content: space-around;
            li:nth-child(1){
              margin-left: 0;
            }
            li{
              width: px2rem(220);
              margin-left: px2rem(17);
              img{
                display: block;
                width: px2rem(220);
                height: px2rem(220);
              }
              .HotFoodShop-btm{
                h4{
                  overflow: hidden;
                  margin: px2rem(15) 0 px2rem(6);
                  color: #333;
                  word-break: break-all;
                  font-size:  px2rem(26);
                  line-height: px2rem(34);
                  font-weight: 400;
                  height: px2rem(68);
                  flex-grow: 1;
                }
                p{
                  color: #ff5339;
                  font-weight: 700;
                  font-size: px2rem(24);
                  line-height:  px2rem(36);
                  i{
                    margin-right: px2rem(2);
                    font-weight: 400;
                    font-style: normal;
                    font-size: px2rem(18);
                    line-height: px2rem(20);
                  }
                }
                .seeyou{
                  margin: px2rem(14) auto 0;
                  width: px2rem(200);
                  height: px2rem(56);
                  border: 1px solid #ff5339;
                  border-radius: px2rem(6);
                  color: #ff5339;
                  text-align: center;
                  font-size: px2rem(24);
                  line-height: px2rem(54);
                }
              }
            }
          }
        }
      }
    }
  }
</style>